<!DOCTYPE html>  
<html>  
<head>  
    <title>网格</title>  
    <meta charset="utf-8">  
    
    <style type="text/css">
	    *{
	    	padding: 0;
	    	margin: 0;
	    }
    	html,body{
    		width:100%;
    		height:100%;
    	}
    	#canvas{
    		width:1086px;
    		height:756px;
    	}
    </style>
</head>  
  
  
<body>  
    <canvas id="canvas">对不起你的浏览器不支持canvas</canvas>  
</body>  

<script type="text/javascript">
	 var canvas = document.getElementsByTagName('canvas')[0];
        canvas.width = 1086;
        canvas.height = 756;
    var space  = 14;
   	var color = "black";
        
        if(canvas.getContext){
            var ctx = canvas.getContext("2d"),
                width = canvas.width,
                height = canvas.height;
            ctx.lineWidth = 1;
　　　　　　　//先画横线
            for( var i = 1; i * space < height; i++ ){
                ctx.strokeStyle = color;
                ctx.beginPath();
                ctx.moveTo(0,i * space);
                ctx.lineTo(width,i* space);
                ctx.stroke();
            }
            console.log(i);
　　　　　　　//再画纵线
            for( var j = 1; j * space < width; j++ ){
                ctx.strokeStyle = color;
                ctx.beginPath();
                ctx.moveTo(j * space, 0);
                ctx.lineTo(j * space, height);
                ctx.stroke();
            }

        }
</script>
</html>  
